<template>
  <div class="bg-gray-50 min-h-screen p-4">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800 flex items-center">
        <i class="fa fa-calendar-check-o mr-2 text-primary"></i>考勤规则管理
        <el-tooltip content="管理考勤规则配置" placement="right">
          <i class="fa fa-question-circle ml-2 text-gray-400 hover:text-gray-600"></i>
        </el-tooltip>
      </h1>
      <p class="text-gray-500 mt-1">设置和管理公司考勤打卡规则</p>
    </div>

    <!-- 查询表单 -->
    <el-card class="mb-6 shadow-sm hover:shadow-md transition-shadow duration-300">
      <template #header>
        <span>查询条件</span>
      </template>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="规则名称">
          <el-input
            v-model="queryParams.ruleName"
            placeholder="请输入规则名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="上班时段">
          <el-time-picker
            clearable
            v-model="queryParams.checkInStart"
            type="time"
            value-format="HH:mm:ss"
            placeholder="开始时间"
          />
          <span class="mx-1">-</span>
          <el-time-picker
            clearable
            v-model="queryParams.checkInEnd"
            type="time"
            value-format="HH:mm:ss"
            placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="下班时段">
          <el-time-picker
            clearable
            v-model="queryParams.checkOutStart"
            type="time"
            value-format="HH:mm:ss"
            placeholder="开始时间"
          />
          <span class="mx-1">-</span>
          <el-time-picker
            clearable
            v-model="queryParams.checkOutEnd"
            type="time"
            value-format="HH:mm:ss"
            placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item label="弹性时间">
          <el-time-picker
            clearable
            v-model="queryParams.lateThreshold"
            type="time"
            value-format="HH:mm:ss"
            placeholder="迟到阈值"
          />
          <span class="mx-1">/</span>
          <el-time-picker
            clearable
            v-model="queryParams.earlyLeaveThreshold"
            type="time"
            value-format="HH:mm:ss"
            placeholder="早退阈值"
          />
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input
            v-model="queryParams.userId"
            placeholder="请输入用户ID"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
            <span>搜索</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 操作按钮 -->
    <div class="flex flex-wrap justify-between items-center mb-6 gap-3">
      <!-- 左侧操作按钮 -->
      <div class="flex flex-wrap gap-2">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="small"
          @click="handleAdd"
          v-hasPermi="['system:record_role:add']"
          class="px-4 py-2 rounded-md hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5"
        >
          <span>新增规则</span>
        </el-button>
        <el-button
          type="success"
          icon="el-icon-edit"
          size="small"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:record_role:edit']"
          class="px-4 py-2 rounded-md hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5"
        >
          <span>修改</span>
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="small"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:record_role:remove']"
          class="px-4 py-2 rounded-md hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5"
        >
          <span>删除</span>
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-download"
          size="small"
          @click="handleExport"
          v-hasPermi="['system:record_role:export']"
          class="px-4 py-2 rounded-md hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5"
        >
          <span>导出</span>
        </el-button>
      </div>

      <!-- 右侧搜索控制和刷新 -->
      <div class="flex items-center gap-2">
        <el-button
          size="small"
          type="text"
          :icon="showSearch ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          @click="showSearch = !showSearch"
          class="hover:text-primary transition-colors"
        ></el-button>
        <el-button
          icon="el-icon-refresh"
          size="small"
          @click="resetQuery"
          class="hover:bg-gray-100 rounded-full p-0.5 transition-all"
        >
          <span class="sr-only">刷新数据</span>
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-card class="shadow-sm hover:shadow-md transition-shadow duration-300">
      <el-table v-loading="loading" :data="record_roleList" @selection-change="handleSelectionChange" stripe>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="ID" align="center" prop="id" width="80" />
        <el-table-column label="规则名称" align="center" prop="ruleName" min-width="120" />
        <el-table-column label="上班时段" align="center" min-width="220">
          <template slot-scope="scope">
            <div class="flex justify-center">
              <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded">{{ scope.row.checkInStart }}</span>
              <span class="mx-1">-</span>
              <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded">{{ scope.row.checkInEnd }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="下班时段" align="center" min-width="220">
          <template slot-scope="scope">
            <div class="flex justify-center">
              <span class="px-2 py-1 bg-green-100 text-green-800 rounded">{{ scope.row.checkOutStart }}</span>
              <span class="mx-1">-</span>
              <span class="px-2 py-1 bg-green-100 text-green-800 rounded">{{ scope.row.checkOutEnd }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="弹性时间" align="center" min-width="200">
          <template slot-scope="scope">
            <div class="flex justify-center">
              <el-tag type="warning" size="mini">迟到: {{ scope.row.lateThreshold }}</el-tag>
              <el-tag type="danger" size="mini">早退: {{ scope.row.earlyLeaveThreshold }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="用户ID" align="center" prop="userId" width="100" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="140">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:record_role:edit']"
              class="text-primary hover:text-primary-dark transition-colors"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:record_role:remove']"
              class="text-danger hover:text-danger-dark transition-colors"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="flex justify-between items-center mt-4">
        <div class="text-sm text-gray-500">
          共 <span class="font-semibold text-primary">{{ total }}</span> 条记录
        </div>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>

    <!-- 添加或修改考勤规则对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="规则名称" prop="ruleName">
          <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
        </el-form-item>
        <el-form-item label="上班时段" prop="checkInStart">
          <div class="flex">
            <el-time-picker
              clearable
              v-model="form.checkInStart"
              type="time"
              value-format="HH:mm:ss"
              placeholder="开始时间"
              style="flex: 1"
            />
            <span class="mx-2 flex items-center">-</span>
            <el-time-picker
              clearable
              v-model="form.checkInEnd"
              type="time"
              value-format="HH:mm:ss"
              placeholder="结束时间"
              style="flex: 1"
            />
          </div>
        </el-form-item>
        <el-form-item label="下班时段" prop="checkOutStart">
          <div class="flex">
            <el-time-picker
              clearable
              v-model="form.checkOutStart"
              type="time"
              value-format="HH:mm:ss"
              placeholder="开始时间"
              style="flex: 1"
            />
            <span class="mx-2 flex items-center">-</span>
            <el-time-picker
              clearable
              v-model="form.checkOutEnd"
              type="time"
              value-format="HH:mm:ss"
              placeholder="结束时间"
              style="flex: 1"
            />
          </div>
        </el-form-item>
        <el-form-item label="弹性时间" prop="lateThreshold">
          <div class="flex">
            <el-time-picker
              clearable
              v-model="form.lateThreshold"
              type="time"
              value-format="HH:mm:ss"
              placeholder="迟到阈值"
              style="flex: 1"
            />
            <span class="mx-2 flex items-center">/</span>
            <el-time-picker
              clearable
              v-model="form.earlyLeaveThreshold"
              type="time"
              value-format="HH:mm:ss"
              placeholder="早退阈值"
              style="flex: 1"
            />
          </div>
        </el-form-item>
        <el-form-item label="用户ID" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户ID" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" class="px-4 py-2 rounded hover:shadow-md transition-all">
          确 定
        </el-button>
        <el-button @click="cancel" class="px-4 py-2 rounded hover:shadow-md transition-all">
          取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listRecord_role, getRecord_role, delRecord_role, addRecord_role, updateRecord_role } from "@/api/system/record_role";

export default {
  name: "Record_role",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 考勤规则表格数据
      record_roleList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        ruleName: null,
        checkInStart: null,
        checkInEnd: null,
        checkOutStart: null,
        checkOutEnd: null,
        lateThreshold: null,
        earlyLeaveThreshold: null,
        status: null,
        userId: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        ruleName: [
          { required: true, message: "规则名称不能为空", trigger: "blur" }
        ],
        checkInStart: [
          { required: true, message: "上班打卡开始时间不能为空", trigger: "blur" }
        ],
        checkInEnd: [
          { required: true, message: "上班打卡结束时间不能为空", trigger: "blur" }
        ],
        checkOutStart: [
          { required: true, message: "下班打卡开始时间不能为空", trigger: "blur" }
        ],
        checkOutEnd: [
          { required: true, message: "下班打卡结束时间不能为空", trigger: "blur" }
        ],
        lateThreshold: [
          { required: true, message: "迟到时间阈值不能为空", trigger: "blur" }
        ],
        earlyLeaveThreshold: [
          { required: true, message: "早退时间阈值不能为空", trigger: "blur" }
        ],
        userId: [
          { required: true, message: "用户ID不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询考勤规则列表 */
    getList() {
      this.loading = true;
      listRecord_role(this.queryParams).then(response => {
        this.record_roleList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        ruleName: null,
        checkInStart: null,
        checkInEnd: null,
        checkOutStart: null,
        checkOutEnd: null,
        lateThreshold: null,
        earlyLeaveThreshold: null,
        status: null,
        createTime: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加考勤规则";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getRecord_role(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改考勤规则";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateRecord_role(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRecord_role(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除考勤规则编号为"' + ids + '"的数据项？').then(function() {
        return delRecord_role(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/record_role/export', {
        ...this.queryParams
      }, `record_role_${new Date().getTime()}.xlsx`);
    }
  }
};
</script>

<style scoped>
/* 自定义样式 */
:root {
  --primary: #165DFF;
  --primary-dark: #0E42D2;
  --success: #52C41A;
  --danger: #F5222D;
  --warning: #FAAD14;
}

/* 表格样式优化 */
.el-table th {
  background-color: #f5f7fa !important;
  font-weight: 600;
  color: #303133;
}

.el-table td {
  padding: 8px 0;
}

.el-table__row {
  transition: background-color 0.2s ease;
}

.el-table__row:hover {
  background-color: #fafafa !important;
}

/* 按钮样式优化 */
.el-button {
  transition: all 0.2s ease;
}

.el-button:hover {
  transform: translateY(-1px);
}

/* 输入框样式优化 */
.el-input__inner {
  transition: border-color 0.2s ease;
}

.el-input__inner:focus {
  border-color: var(--primary) !important;
}

/* 卡片样式优化 */
.el-card {
  border-radius: 8px;
  border: 1px solid #ebedf0;
}

/* 动画效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

/* 新增样式 */
.el-button[icon=el-icon-arrow-up],
.el-button[icon=el-icon-arrow-down] {
  padding: 0 4px;
}

.el-button[icon=el-icon-refresh] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .flex-wrap {
    flex-wrap: wrap;
  }
  
  .flex-wrap > div {
    flex-basis: 100%;
    justify-content: center !important;
    margin-bottom: 8px;
  }
}
</style>